<template>
  <div class="header">
    <!--折叠按钮-->
    <div class="collapse-btn" @click="collapseChange">
      <i class="el-icon-menu"></i>
    </div>
    <div class="logo">music后台管理系统</div>
    <div class="header-right">
      <div class="btn-fullscreen" @click="handleFullScreen">
        <el-tooltip :content="fullscreen?'取消全屏':'全屏'" placement="bottom">
          <i class="el-icon-rank"></i>
        </el-tooltip>
      </div>
      <div class="user-avtor">
        <img src="../assets/img/user.jpg"/>
      </div>
      <el-dropdown class="user-name" trigger="click" @command="handleCommand">
        <span class="el-dropdown-link">
          {{userName}}
          <i class="el-icon-caret-bottom"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
  import bus from "../assets/js/bus"
  export default {
    name: "TheHeader",
    data(){
      return{
        collapse:false,
        fullscreen:false
      }
    },
    computed:{
      userName(){
        return localStorage.getItem("userName")
      }
    },
    methods:{
      //侧边栏折叠
      collapseChange(){
        this.collapse = !this.collapse;
        bus.$emit('collapse',this.collapse)
      },
      //全屏事件
      handleFullScreen(){
        //是全屏
        if(this.fullscreen){
          if(document.exitFullscreen){
            document.exitFullscreen()
          }else if(document.webkitCancelFullScreen){  //safari chrome
            document.webkitCancelFullScreen()
          }
          // else if(document.msExitFullScreen){       //ie
          //   document.msExitFullScreen();
          // }else if(document.mozCancelFullScreen){  //firefox
          //   document.mozCancelFullScreen();
          // }
        }else{//不是全屏
          let element = document.documentElement;
          if(element.requestFullscreen){   //普通浏览器
            element.requestFullscreen();
          }else if(element.webkitRequestFullScreen){  //safari chrome
            element.webkitRequestFullScreen();
          }
          // else if(element.msRequestFullScreen){   //ie
            // element.msRequestFullScreen();
          // }else if(element.mozRequestFullScreen){       //firefox
          // element.mozRequestFullScreen();
          // }
        }
        this.fullscreen = !this.fullscreen
      },
      handleCommand(command){
        if(command =='logout'){
          localStorage.removeItem("userName");
          this.$router.push("/")
        }
      }
    }
  }
</script>

<style scoped>
.header{
  position: relative;
  background-color: #253041;
  box-sizing: border-box;
  width: 100%;
  height:70px;
  font-size:22px ;
  color:#ffffff;
}
  .collapse-btn{
    float: left;
    padding: 0 21px;
    cursor: pointer;
    line-height: 70px;
  }
  .header .logo{
    float: left;
    line-height: 70px;
  }
  .header-right{
    float:right;
    line-height: 70px;
    align-items: center;
    padding-right: 50px;
    /*让div中每个元素居中对齐*/
    display: flex;
    /*让div中每个元素平均对齐*/
  }
  .btn-fullscreen{
    margin-right: 5px;
    transform: rotate(45deg);
    font-size: 24px;
  }

  .user-avtor{
    margin-left: 20px;
  }

  .user-avtor img{
    display: block;
    width:40px;
    height:40px;
    border-radius: 50%;
  }
  .el-dropdown-link{
    color:#ffffff;
    cursor: pointer;
  }
  .user-name{
    margin-left: 10px;
  }
</style>
